<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Jxz">
    <title></title>
    <script src="../jquery-3.1.1.js"></script>
    <style>
        .box{
            width: 500px;
            margin: 0 auto;
        }
        .box .content{
            line-height: 30px;
        }
        .box .right{
            float: right;
        }
        .box .right strong{
            font-size: 26px;
            color: orange;
        }
        .input .text{
            width: 100%;
            height: 120px;
            resize: none;
            border: 1px solid #aaa;
            box-shadow: 0 0 5px #ccc inset;
            padding: 10px;
            font-size: 16px;
        }
        .input .text:focus{
            border-color: #f93;
            box-shadow: none;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <span>有什么新鲜事想告诉大家？</span>
            <span class="right">可以发布超过<strong>140</strong>字的微博啦</span>
        </div>
        <div class="input"><textarea class="text"></textarea></div>
    </div>
</body>
</html>
<script>
    // 输入内容时计算字数
    $('.input .text').keyup(textNum);
    // 获取输入焦点时计算字数
    $('.input .text').focus(textNum);

    // 计算字数的方法
    function textNum(){
        // 获取输入字符的长度
        var length = $(this).val().length;
        // console.log(length);

        // 当前输入文字总长度（一个中文字符是一个文字，两个英文字符是一个文字）
        var currentLength = 0;

        if(length > 0){
            for(var i = 0; i < length; i++){
                if($(this).val().charCodeAt(i) > 255){
                    // 中文字符
                    currentLength += 1;
                }else{
                    // 英文字符
                    currentLength += 0.5;
                }
            }
            console.log(currentLength);
        }
        var result = Math.ceil(currentLength);
        if(result < 140){
            $('.right').html('已输入<strong style="color:gray;">'+result+'</strong>字');
        }else{
            $('.right').html('已输入<strong style="color:red;">'+result+'</strong>字');
        }

    }

</script>